<template>
    <div class="leftOne">
        <ThemeTitle :title="title"/>
        <div class="landArea">
            <div class="landIcon">
                <img src="/data/images/hngk/ceng.png" alt="">
            </div>
            <div class="landDetail">
                <div class="title">矿山企业总数</div>
                <div class="num">
                    <div class="" v-for="(item,index) in numList" :key="index">
                        {{item}}
                    </div>
                    <div>㎡</div>
                </div>
            </div>
            <div class="sizeDetail">
                <div v-for="(item,index) in sizeList" :key="index">
                    <span>{{item.name}}：</span>
                    <span>{{item.val}}</span>
                </div>
            </div>
        </div> 
        <div class="islandAndSea">
            <div class="islandArea" v-for="(item,index) in islandList" :key="index">
                <div class="landName">{{item.name}}</div>
                <div class="landVal" :class="{'yColor':index%2==0,'rColor':index%2!==0}">{{item.val}}</div>
            </div>   
        </div> 
        <div class="twoTitle">
            <div>
                尾矿库等级统计
            </div>
            <div>
                尾矿库安全度统计
            </div>
        </div>        
        <div class="geoIntro">
            <div id="levelChart"></div>
            <div id="safeChart"></div>
        </div>  
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title = provide("title", "矿山概况"); 
            const { ctx }  = getCurrentInstance();
            const numList = [
                2,5,1,3
            ]
            const carouselList = [
                {imgSrc:"/data/images/hngk/haibian.jpg",dec:"海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"/data/images/hngk/haibian.jpg",dec:"北以琼州海峡与广东划界，海南省是中华人民共和国最南端的省级行政区，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"/data/images/hngk/haibian.jpg",dec:"西临北部湾与广西、越南相对，海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"}
            ]
            const islandList = [
                {name:'接入数',val:'53,114㎡'},
                {name:'地下矿山',val:'53,114㎡'},
                {name:'露天矿山',val:'53,114㎡'},
                {name:'尾矿库',val:'53,114㎡'}
            ]
            const sizeList = [
                {name:'大型',val:'28家'},
                {name:'中型',val:'28家'},
                {name:'小型',val:'28家'}
            ]
            function drawBar(){
                var dom = document.getElementById("levelChart");
                var myChart = ctx.$echarts.init(dom);
                var option = {
                        grid: [
                            {
                                //左侧的柱状图grid
                                width: "90%",
                                left: '1%',
                                top: '0',
                                right: '0',
                                bottom: '0'
                            },
                        
                        ],
                        xAxis: [
                            {
                                //左侧柱状图的X轴
                                gridIndex: 0,//x 轴所在的 grid 的索引
                                show: false
                            },
                            {
                                //右侧柱状图的X轴
                                gridIndex: 1,//x 轴所在的 grid 的索引
                                show: false
                            }],
                        yAxis: [
                            {
                                //左侧柱状图的Y轴
                                gridIndex: 0,//y轴所在的 grid 的索引
                                splitLine: 'none',
                                axisTick: 'none',
                                axisLine: 'none',
                                axisLabel: {
                                    verticalAlign: 'bottom',
                                    align: 'left',
                                    padding: [0, 0, 15, 15],
                                    // textStyle: {
                                        color: '#befbff',
                                        fontSize: '16',
                                    // }
                                },
                                data: ['制造业','建筑业','交通运输','公共管理'],
                                inverse: true,
                            },
                            {
                                //左侧柱状图的Y轴
                                gridIndex: 0,//y轴所在的 grid 的索引
                                splitLine: 'none',
                                axisTick: 'none',
                                axisLine: 'none',
                                data: [555,444,333,222],
                                inverse: true,
                                axisLabel: {
                                    show: true,
                                    verticalAlign: 'bottom',
                                    align: 'right',
                                    padding: [0, 20, 15, 0],
                                    // textStyle: {
                                        color: '#fff',
                                        fontSize: '16',
                                    // },
                                    formatter: function (value) {
                                        return '{x|' + value + '}  {y|' + "元}"
                                    },
                                    rich: {
                                        y: {
                                            color: '#befbff',
                                            fontSize: 16
                                        },
                                        x: {
                                            color: '#f6cf42',
                                            fontSize: 16
                                        }
                                    }
                                }
                            },
                            {
                                //左侧柱状图的Y轴
                                gridIndex: 0,//y轴所在的 grid 的索引
                                splitLine: 'none',
                                axisTick: 'none',
                                axisLine: 'none',
                                data: []
                            }

                        
                        
                        ],
                        series: [
                            {
                                name: '值',
                                type: 'bar',
                                xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                                yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                                data: [555,444,333,222],
                                barWidth: 15,
                                itemStyle: {
                                        color: "rgba(0,234,255,1)",
                                        // color: ctx.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        //     offset: 0,
                                        //     color: "#49bdff" // 0% 处的颜色
                                        // }, {
                                        //     offset: 1,
                                        //     color: "#54ffd5" // 100% 处的颜色
                                        // }], false),
                                        borderRadius: 6,
                                    
                                },
                                z: 2
                            },
                            {
                                name: '外框',
                                type: 'bar',
                                xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                                yAxisIndex: 2,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                                barGap: '-100%',
                                data: [1000, 1000, 1000, 1000],
                                barWidth: 15,
                                itemStyle: {
                                    
                                        color: '#2d5271',
                                        borderRadius: 6,
                                    
                                },
                                z: 0
                            }
                            
                        ]
                    };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawSafe(){
                var dom = document.getElementById("safeChart");
                var myChart = ctx.$echarts.init(dom);
                    let dataMax = 70;
                    const source = {
                        data: [43, 10, 28, 35, 50, 19, 13],
                        indicator: [
                        { name: '险库', max: dataMax},
                        { name: '危库', max: dataMax},
                        { name: '病库', max: dataMax},
                        { name: '正常库', max: dataMax},
                        { name: '病库', max: dataMax},
                        ]
                    }
                    const buildSeries = function(data){
                        const helper = data.map((item, index) => {
                            const arr = new Array(data.length);
                            arr.splice(index, 1, item);
                            return arr;
                        })
                        return [data, ...helper].map((item, index) => {
                            return {
                                type: 'radar',
                                center: ['50%', '40%'],
                                itemStyle: {
                                    color: '#31e586'
                                },
                                lineStyle: {
                                    color: index === 0 ? '#31e586' : 'transparent'
                                },
                                areaStyle: {
                                    color: index === 0 ? '#31e586' : 'transparent',
                                    opacity: 0.3
                                },
                                tooltip: {
                                show: index === 0 ? false : true,
                                formatter: function() {
                                    return source.indicator[index - 1].name + '不满意度：' + source.data[index - 1]+'%';
                                }
                                },
                                z: index === 0 ? 1 : 2,
                                data: [item]
                            }
                            })
                    }

                var option = {
                    tooltip: {},
                    grid: {
                            x: 40,
                            x2: 100,
                            y2: 150
                    },
                    radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            fontSize: 16,
                            color: ['#d1dbf2'],
                            padding: [1, 1]
                        }
                    },
                    splitNumber: 4,
                    splitArea: {
                        show: true,
                        areaStyle: {
                        color: ['rgba(12,62,129,0)','rgba(12,62,129,0.3)','rgba(12,62,129,0)','rgba(12,62,129,0)']
                        }
                    },
                    splitLine: {
                        lineStyle: {
                        color: '#0c3e81'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                        color: '#0c3e81'
                        }
                    },
                    indicator: source.indicator
                    },
                    series: buildSeries(source.data)
                };

                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            onMounted(()=>{
                drawBar()
                drawSafe()
            })
            return {
                numList,
                carouselList,
                title,
                islandList,
                sizeList
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
  .leftOne
    .landArea
        width:vw(365)
        height:vh(132)
        margin-top:vh(25)
        background: url('/data/images/hngk/bigrec.png') no-repeat
        background-size: 100% 100%
        padding:vh(25) vw(28) vh(28) vw(33)
        display:flex
        align-items :center
        .landIcon
            margin-right:vw(30)
        .landDetail
            width:vw(180)
            .title
                font-size:vw(18)
                cursor: pointer
            .num
                display:flex
                justify-content:flex-start
                margin-top:vh(17)
                div 
                    flex-shrink: 0
                    width: vw(29)
                    height: vh(45)
                    margin-right:vw(5)
                    line-height:vh(45)
                    font-size:vw(26)
                    background: url('/data/images/hngk/num.png') no-repeat
                    background-size:100% 100%
                    text-align: center
                div:last-child
                    font-size:vw(16)
                    background: none
                    flex-shrink: 0
                    width:vw(18)
        .sizeDetail
            display:flex
            flex-direction :column
            justify-content :space-between
            height:vh(80)
    .islandAndSea
        width:vw(364)
        height:vh(100)
        margin-top:vh(17)
        display:flex
        justify-content :space-between
        background: url('/data/images/hngk/littlerec.png') no-repeat
        background-size:100% 100%
        .islandArea
            width:vw(90)
            height:vh(100)
            text-align:center
            .landName
                line-height:vh(50)
                width:100%
                font-size: vw(14)
                cursor: pointer
            .landVal
                line-height:vh(50)
                width:100%
                font-size: vw(19)
            .yColor
                color:rgba(255,188,50,1)
            .rColor
                color:rgba(255,57,118,1)
        // .seaArea
        //     width:vw(172)
        //     height:vh(81)
        //     background: url('/data/images/hngk/littlerec.png') no-repeat
        //     background-size:100% 100%
        //     text-align:center
        //     .seaName
        //         line-height:vh(40)
        //         width:100%
        //         font-size: vw(16)
        //         cursor: pointer
        //     .seaVal
        //         line-height:vh(40)
        //         width:100%
        //         font-size: vw(22)
    .geoIntro
        width:vw(365)
        height:vh(220)
        margin-top:vh(5)
        margin-bottom:vh(25)
        display:flex
        #levelChart
            flex:1
            height:100%
        #safeChart
            flex:1
            height:100%
    .twoTitle
        display:flex
        justify-content : space-around
        div
            color: rgba(0,234,255,1)  
            flex:1
            font-size:vw(16)
            text-align:center
            height:vh(50)
            line-height: vh(60)           
</style>